<template>
    <div id="workbanch">
        <div class="work_right">
            <div id="box1">
                <div class="je">
                    <img src="../image/昨日成交额.png" alt="">
                </div>
                <div class="jeicon">
                    <img src="../image/金额.png" alt="">
                </div>
            </div>
            <div id="box2">
                <div class="dingdan">
                    <img src="../image/昨日成交订单.png" alt="">
                </div>
                <div class="dd">
                    <img src="../image/订单.png" alt="">
                </div>
            </div>
            <div id="box3">
                <div class="huiyuan"><img src="../image/昨日新增会员.png" alt=""></div>
                <div class="hy"><img src="../image/会员.png" alt=""></div>
            </div>
            <div id="box4">
                <div class="chanpin"><img src="../image/昨日新增产品.png" alt=""></div>
                <div class="cp"><img src="../image/产品.png" alt=""></div>
            </div>
          
            <div class="chaxun">
                <div class="shuxian">
                    <img src="../image/竖线.png" alt="">
                    <img class="cx" src="../image/查询.png" alt="">
                </div>
                <div class="xixian">
                    <img src="../image/矩形 11 拷贝 12.png" alt="">
                </div>
                <div>
                    <el-input class="shuru_ssk" placeholder="请输入关键字" />
                    <div class="xl_cd">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                会员<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item></el-dropdown-item>
                                <el-dropdown-item></el-dropdown-item>
                                <el-dropdown-item></el-dropdown-item>
                                <el-dropdown-item disabled></el-dropdown-item>
                                <el-dropdown-item divided></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="btn_cx">
                        <el-button class="btn_cx_s" @click="btn$chaxun" type="primary">查询</el-button>

                    </div>
                </div>
            </div>

            <div class="zuixin_cp">
                <div class="pl_zx">
                    <img src="../image/竖线.png" alt="">
                    <img class="pinglun" src="../image/最新评论.png" alt="">
                </div>
                <div class="xixian_1"><img src="../image/矩形 11 拷贝 12.png" alt=""></div>
                <div class="ck_qb">
                    <img src="../image/查看全部.png" alt="">
                    <img src="../image/_.png" alt="">
                </div>
                <div class="cc_k" v-for="(item, index) in 4" :key="index"></div>
            </div>
        </div>
        <div class="work_left">
            
            <!-- <div class="weather"><img src="../image/矩形 12 拷贝.png" alt=""></div> -->
            <div class="zuixin_cpin">
                <div class="zuixin_canpin"><img src="../image/竖线.png" alt="">
                    <img src="../image/最新产品.png" alt="">
                </div>
                <div class="chakan_qb">
                    <img src="../image/查看全部.png" alt="">
                    <img src="../image/_.png" alt="">
                </div>
                <div class="x_hengx">
                    <img src="../image/矩形 11 拷贝 13.png" alt="">
                </div>
                <div class="neirong">
                    <ul>
                        <li>内容显示区域部分</li>
                    </ul>
                </div>


            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: "哈哈哈",
                user: {



                }

            }
        },
        methods: {
            btn$chaxun() {
                console.log("欧威点击了");
            },



        },



    }
</script>
<style scoped>
    .work_left {
                        
        width: 22%;
height: 100%;
background-color: #fff;
display: inline-block;
overflow: hidden;
margin-left: 2%;
margin-top: 15px;
border-radius: 8px;
position: relative;
    }
    .el-input /deep/ .el-input__inner  {
    width: 450px;
    height: 35px;
}
    .work_right {

        
        width: 75%;
 height: 100%;
 background-color: #fff;
 border-radius: 8px;
 position: relative;
 /* top: 10px; */
 display: inline-block;
 overflow: hidden;
        
        
        
        
        
        
        


    }

    #workbanch {
        width: 100%;

        height: 100%;
        /* background-color: red; */
    }

    .neirong {
        position: absolute;
        top: 85px;
        left: 20px;
    }

    .neirong>ul>li {
        margin-top: 20px;
    }

    .x_hengx {
        position: absolute;
        top: 50px;
        right: 22px;
    }

    .chakan_qb {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .zuixin_canpin {
        position: absolute;
        top: 20px;
        left: 20px;
        
    }

    .zuixin_cpin {
        width: 100%;
        height: 585px;
        position: absolute;
        background-color: #fff;
        /* border: 1px solid #000; */
        /* top: -530px; */
        /* left: 1220px; */

    }

    .cc_k {
        width: 460px;
        height: 140px;
        border: 10px solid #F3F5FA;
        /* background-color: red; */
        position: absolute;
        top: 100px;
        margin-left: 20px;
    }

    .ck_qb {
        position: absolute;
        top: 23px;
        right: 30px;
        cursor: pointer;
    }

    .workbanch {
        position: relative;
    }

    .xixian_1 {
        position: absolute;
        top: 50px;
    }

    .pinglun {
        margin-left: 10px;
    }

    .pl_zx>img {
        position: absolute;
        display: inline-block;
        top: 20px;
        left: 20px;
    }

    #box1 {
        margin-top: 20px;
        width: 265px;
        height: 175px;
        background-color: #fff;
        display: inline-block;
        margin-left: 25px;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
    }

    #box2 {
        margin-top: 20px;
        width: 265px;
        height: 175px;
        background-color: #fff;
        display: inline-block;
        margin-left: 25px;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
    }

    #box3 {
        margin-top: 20px;
        width: 265px;
        height: 175px;
        background-color: #fff;
        display: inline-block;
        margin-left: 25px;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
    }

    #box4 {
        margin-top: 25px;
        width: 265px;
        height: 175px;
        background-color: #fff;
        display: inline-block;
        margin-left: 20px;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
    }

    .je {
        position: absolute;
        top: 25px;
        left: 20px;

    }

    .jeicon {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .dingdan {
        position: absolute;
        top: 25px;
        left: 20px;

    }

    .dd {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .huiyuan {
        position: absolute;
        top: 25px;
        left: 20px;
    }

    .hy {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .chanpin {
        position: absolute;
        top: 25px;
        left: 20px;
    }

    .cp {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }

    .weather {
        display: inline-block;
        margin-left: 50px;
        position: absolute;
        top: 125px;

    }

    .chaxun {
        width: 1143px;
        background-color: #fff;
        height: 175px;
        margin-left: 24px;
        position: relative;
        top: 20px;
        border-radius: 8px;
    }

    .shuxian>img {
        /* margin-left: 30px; */
        position: absolute;
        display: inline-block;
        top: 20px;
        left: 20px;
    }

    .cx {
        margin-left: 10px;
    }

    .xixian {
        position: absolute;
        top: 50px;

    }

    .shuru_ssk {
        width: 450px;
        position: absolute;
        top: 85px;
        left: 350px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: black;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .xl_cd {
        position: absolute;
        top: 85px;
        left: 285px;
        border: 1px solid #DCDFE6;
        padding: 8px 9px;
        border-radius: 10px 0 0 10px;
    }

    .btn_cx {
        position: absolute;
        top: 85px;
        left: 800px;
    }

    .btn_cx_s {
        width: 100px;
        border-radius: 0 10px 10px 0;
    }

    .zuixin_cp {
        width: 1143px;
        height: 400px;
        background-color: #fff;
        margin-left: 24px;
        position: relative;
        top: 60px;
        border-radius: 8px;
    }
</style>